@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/word/details.css')}}">

@section('content')
<div class="main" id="worddetails" v-cloak>
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>当前位置：</span>
            <span><a href="{{route('home.index.index') }}">首页</a> > <a href="{{route('home.word.wordList') }}">所有文档</a> > @{{wordDetails.title}}</span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="bottomContent">
        <div class="bottomContent_left">
            <div class="bottomContent_left_header">
                {{--<img src="{{URL::asset('./img/word/zlmb.png')}}">--}}
                <img :src="wordDetails.thumb">
                <div class="wordDetailsS">
                    <p class="wordDetailsS_title">@{{wordDetails.title}}</p>
                       <!-- <span @click="wordCollect" v-if="wordDetails.is_collect==1"><img src="{{URL::asset('./img/huixing.png')}}">收藏</span>
                        <span @click="wordCollect" v-else><img src="{{URL::asset('./img/xingxing.png')}}"></span> -->
                    <div class="wordMes">
                        <div>文档类型：@{{wordDetails.type}}</div>
                        <div>文档格式：@{{wordDetails.format}}</div>
                        <div>文档大小：@{{wordDetails.size}}</div>
                        <div>浏 览 量 ： @{{wordDetails.view}}</div>
                        <div>下 载 量 ： @{{wordDetails.download}}</div>
                        <!-- <div>
                            <img src="{{URL::asset('./img/word/time.png')}}">
                            发布时间：@{{wordDetails.created_at}}
                        </div> -->
                    </div>
                    <div class="btnBox">
                        <div class="btnBox1">
                            <button @click="wordDownload(wordDetails.id)">
                                在线下载
                            </button>
                            <div class="btn1" @click="wordCollect" v-if="wordDetails.is_collect==1">收藏文件</div>
                            <div v-else style="background:#ccc;color:#fff" class="btn1 wordCollect" @click="wordCollect" >收藏文件</div>
                        </div>
                        <p class="text">发布时间：@{{wordDetails.created_at}}</p>
                    </div>
                    
                </div>
            </div>
            <div class="bottomContent_left_main">
                <span>
                    <i></i>文档详情
                </span>
                <div id="canvass"></div>
                <img style="width: 100%;height: auto;" src="{{URL::asset('./img/zl_bg1.png')}}">
            </div>

        </div>
        <div class=" bottomContent_right">
            <div class="newsHot">
                <div class="newhotContent_title">
                    <img src="{{URL::asset('./img/news/hot.png')}}"><span>热门文档</span>
                </div>
                <div class="newhotContent_main">
                    <div v-for="(item,index) in hotArr" :key="index" v-if="index < 6" @click="getDetails(item.id)">
                        <p class="title">
                            <span>@{{index +1}}</span>
                            @{{item.title}}
                        </p>
                        <div class="rightDown">
                            <p>下载量：@{{item.download}}次</p>
                            <p>查看详情 ></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="newsNew">
                <div class="newhotContent_title">
                    <img src="{{URL::asset('./img/news/news.png')}}"><span>最新文档</span>
                </div>
                <div class="newhotContent_main">
                    <div v-for="(item,index) in newArr" :ket="index" v-if="index < 6" @click="getDetails(item.id)">
                    <p class="title">
                            <span>@{{index +1}}</span>
                            @{{item.title}}
                        </p>
                        <div class="rightDown">
                            <p>下载量：@{{item.download}}次</p>
                            <p>查看详情 ></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="foo_advi" v-if="advsBottom[0]" :style="{backgroundImage:'url('+advsBottom[0].thumb+')'}"> -->
    {{--<div class="foo_advi">--}}
        {{--<span>说出你的<a>建议，</a></span>--}}
        {{--<span>持续<a style="color:#F28B3C">好礼相送！</a></span>--}}
        {{--<span class="foo_cont">--}}
            {{--无论是表扬、批评还是吐槽--}}
            {{--<p>只要是你给的，我们都接受</p>--}}
        {{--</span>--}}
        {{--<button @click=" window.location.href = '{{ route('home.hrmy.hrFeedBack') }}'">我要点评</button>--}}
    {{--</div>--}}
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#worddetails',
            data: () => {
                return {
                    wordId: getQueryString("id"),
                    wordDetails: {},
                    hotArr: [],
                    newArr: [],
                }
            },
            created() {
                this.getMes();
            },
            mounted() {},
            methods: {
                getMes() {
                    let data = {
                        id: this.wordId,
                    }
                    apiAjax("{{ route('home.word.wordDetailsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.wordDetails = res.data;
                            this.hotArr = res.data.hot
                            this.newArr = res.data.new
                            var pageindex = 1;
                            // var url = 'http://hang.tlgdwx.com/files/2019-07-09/yy.pdf';
                            var url = this.wordDetails.show_link;
                            pdfjsLib.workerSrc = "{{ asset('js/pdfjs/pdf.worker.js') }}";
                            var loadingTask = pdfjsLib.getDocument(url);
                            loadingTask.promise.then(function(pdf) {
                                for (var i = 1; i <= pdf.numPages; i++) {
                                    pdf.getPage(i).then(function(page) {
                                        var scale = 1.5;
                                        var viewport = page.getViewport({
                                            scale: scale,
                                        });
                                        // var canvas = document.getElementById('the-canvas');
                                        var canvas = document.createElement('canvas');
                                        var context = canvas.getContext('2d');
                                        canvas.height = viewport.height;
                                        canvas.width = viewport.width;
                                        var renderContext = {
                                            canvasContext: context,
                                            viewport: viewport,
                                        };
                                        document.getElementById('canvass').appendChild(canvas);
                                        page.render(renderContext);
                                    });
                                }
                            });

                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                wordCollect() {
                    let data = {
                        collect_id: this.wordId,
                    }
                    apiAjax("{{ route('home.word.wordCollectApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getMes();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getDetails(id) {
                    window.location.href = "{{ route('home.word.wordDetails') }}?id=" + id
                },
                wordDownload(id) {
                    let data = {
                        word_id: id
                    }
                    apiAjax("{{ route('home.word.wordDownloadApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            var download = $("body");
                            download.append("<a id='down' href='" + this.wordDetails.file_link + "' target='_blank' download='" + this.wordDetails.title + "' style='display:none'>下载该文件</a>");
                            $("#down")[0].click();

                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                }
            }
        })
    })
</script>
@endsection